<template>
  <div class="categories">
  <!-- 面包屑组件 -->
    <el-breadcrumb separator="/">
      <!-- to: 路由跳转对象，同 vue-router 的 to -->
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 按钮组件  : 添加角色按钮绑定事件，显示对话框 -->
    <el-button type="primary" plain @click="handleAddCate">添加分类</el-button>

    <!-- 使用TreeGrid组件 -->
    <template>
      <tree-grid
      v-loading="loading"
      class="mt-15"
      :treeStructure="true"
      :columns="columns"
      :data-source="dataSource"
      @deleteCate="deleteCategory"
      @editCate="editCategory"
      ></tree-grid>
    </template>

    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[5, 10,15, 20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalPages"
      class="mt-15">
    </el-pagination>

 <!-- 添加分类对话框 -->
   <!--
     before-close  关闭前的回调，会暂停 Dialog 的关闭
           仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效
   -->
   <el-dialog title="添加分类" :visible.sync="addDialogFormVisible" :before-close="closeAdd">
      <!-- 3.5 给表单添加ref，主要用来js校验 -->
      <el-form :model="addForm" :rules="myRules" ref="addRef">
        <el-form-item label="分类名称" :label-width="formLabelWidth" prop="cat_name">
          <el-input v-model="addForm.cat_name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="父级名称" :label-width="formLabelWidth">
          <!-- 使用Cascader级联选择器 -->
           <el-cascader
            :options="cateList"
            :props="defaultProps"
            v-model="selectedCates"
            @change="handleChange">
          </el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="cancelAdd">取 消</el-button>
        <el-button type="primary" @click="confirmAdd">确 定</el-button>
      </div>
    </el-dialog>

  <!-- 编辑分类对话框 -->
   <!--
     before-close  关闭前的回调，会暂停 Dialog 的关闭
           仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效
   -->
   <el-dialog title="编辑分类" :visible.sync="editDialogFormVisible" :before-close="closeEdit">
      <!-- 3.5 给表单添加ref，主要用来js校验 -->
      <el-form :model="editForm" :rules="myRules" ref="editRef">
        <el-form-item label="分类名称" :label-width="formLabelWidth" prop="cat_name">
          <el-input v-model="editForm.cat_name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="父级名称" :label-width="formLabelWidth">
          <!-- 使用Cascader级联选择器 -->
           <el-cascader
            :options="cateList"
            :props="defaultProps"
            v-model="selectedCates"
            @change="handleChange">
          </el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="cancelEdit">取 消</el-button>
        <el-button type="primary" @click="confirmEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入TreeGrid组件
import TreeGrid from '@/components/TreeGrid/TreeGrid.vue'
// 引入封装好的相关请求函数  queryCate => 根据id查询分类的封装请求函数
import { getCategories, addCategories, deleteCate, editCate } from '@/api/handleUrl'

export default {
  components: { TreeGrid },
  data () {
    return {
      // 开启加载效果
      loading: true,
      // 表格数据源
      dataSource: [],
      // 列的属性
      columns: [{
        text: '分类名称',
        dataIndex: 'cat_name',
        width: ''
      }, {
        text: '是否有效',
        dataIndex: 'cat_deleted',
        width: ''
      }, {
        text: '排序',
        dataIndex: 'cat_level',
        width: ''
      }],
      /* 添加分类 */
      // 设置添加分类对话框的显示模式 -- 默认为隐藏
      addDialogFormVisible: false,
      // 设置存储添加分类表单数据数组
      addForm: {
        // 分类父ID 有默认值
        cat_pid: 0,
        // 分类名称
        cat_name: '',
        // 分类层级 有默认值
        cat_level: 0
      },
      /* 编辑分类 */
      // 设置编辑分类对话框的显示模式 -- 默认为隐藏
      editDialogFormVisible: false,
      // 设置存储编辑分类表单数据数组
      editForm: {
        // 分类id
        id: '',
        // 分类名称
        cat_name: ''
      },
      // 设置对话框input标签前面文字的宽度
      formLabelWidth: '80px',
      /* 级联选择器组件数据 */
      cateList: [],
      // 级联当前选中的数组
      selectedCates: [],
      // 级联props属性相关配置
      defaultProps: {
        // 指定选项的值为选项对象的某个属性值
        value: 'cat_id',
        // 指定选项标签为选项对象的某个属性值
        label: 'cat_name',
        // 指定选项的子选项为选项对象的某个属性值
        children: 'children'
      },
      /* 分页 */
      // 当前页码 --  默认为首页
      pagenum: 1,
      // 每页显示条数 -- 默认为10条
      pagesize: 5,
      // 用户总记录数
      totalPages: 0,

      /* 表单验证规则 */
      myRules: {
        cat_name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
      }
    }
  },
  created () {
    // 初始化表格数据列表
    this.initTable()
    // 成功获取表格数据后，关闭加载
    this.loading = false
  },
  methods: {
    /*  动态更新每页数据条数 */
    handleSizeChange (val) {
      // 重新设置每页的条数
      this.pagesize = val
      // 重新刷新用户数据列表
      this.initTable()
    },
    /* 动态更新当前页码 */
    handleCurrentChange (val) {
      // 重新设置当前页
      this.pagenum = val
      // 重新刷新用户数据列表
      this.initTable()
    },
    /* 级联选择器 */
    handleChange (value) {
      if (value.length === 1) {
        this.addForm.cat_level = 1
        this.addForm.cat_pid = value[0]
      } else if (value.length === 2) {
        this.addForm.cat_level = 2
        this.addForm.cat_pid = value[1]
      }
    },
    /* TreeGrid组件 */
    deleteCategory (cid) {
      // 弹框确认
      this.$confirm('此操作将永久删除该分类, 是否继续?', '删除分类', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //  发请求-删除
        deleteCate(cid).then(res => {
          if (res.meta.status === 200) {
            // 刷新商品列表
            this.initTable()
            // 成功删除提示
            this.$message.success(res.meta.msg)
          } else {
            // 删除失败提示
            this.$message.error(res.meta.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    editCategory (cid, row) {
      // 显示编辑框
      this.editDialogFormVisible = true
      // 存储发送编辑请求需要的id
      this.editForm.id = cid // 疑惑点：这样只能获取当前行的分类id，但点击去编辑的可以不是该id对应的类
      // 发送请求，获取二级联
      getCategories(2).then(res => {
        if (res.meta.status === 200) {
          // 级联下拉显示内容
          this.cateList = res.data
        } else {
          // 获取失败提示信息
          this.$message.error(res.meta.msg)
        }
      })
      // 将当前选中的分类层级的id添加至定义选中的id数组中
      /*
        通过row获取当前选中分类行数据
          思路：通过row._parent与row._parent._parent的有无判断当前选中行的层级id数组具体值
      */
      if (!row._parent) {
        // 当前选中分类行为1级
        this.selectedCates.push(row.cat_id)
      } else if (row._parent && !row._parent._parent) {
        // 当前选中分类行为2级
        this.selectedCates.push(row._parent.cat_id)
        this.selectedCates.push(row.cat_id)
      } else {
        // 当前选中分类行为3级
        this.selectedCates.push(row._parent._parent.cat_id)
        this.selectedCates.push(row._parent.cat_id)
        // input显示的分类名称
        this.editForm.cat_name = row.cat_name
      }
    },
    /* 初始化表格数据 */
    initTable () {
      getCategories(3, this.pagesize, this.pagenum).then(res => {
        if (res.meta.status === 200) {
          // 商品分类表格数据
          this.dataSource = res.data.result
          // 商品分类列表数据总条数
          this.totalPages = res.data.total
        } else {
          this.$message.error(res.meta.msg)
        }
      })
    },
    /* 添加分类 */
    handleAddCate () {
      // 显示添加分类会话框
      this.addDialogFormVisible = true
      // 发送请求，获取二级联
      getCategories(2).then(res => {
        if (res.meta.status === 200) {
          // 级联下拉显示内容
          this.cateList = res.data
        } else {
          // 获取失败提示信息
          this.$message.error(res.meta.msg)
        }
      })
    },
    /* 关闭添加分类会话框 */
    closeAdd () {
      // 移除表单校验结果
      this.$refs.addRef.clearValidate()
      // 隐藏会话框
      this.addDialogFormVisible = false
    },
    /* 取消添加分类 */
    cancelAdd () {
      // 移除表单校验结果
      this.$refs.addRef.clearValidate()
      // 隐藏会话框
      this.addDialogFormVisible = false
    },
    /* 确认添加分类 */
    confirmAdd () {
      // js校验
      this.$refs.addRef.validate(IsPass => {
        if (IsPass) {
          // 校验通过 -- 发送添加请求
          addCategories(this.addForm)
            .then(res => {
              if (res.meta.status === 201) {
                /* 重置添加表单 */
                this.addForm.cat_pid = 0 // 分类父ID
                this.addForm.cat_name = '' // 分类名称
                this.addForm.cat_level = 0 // 分类层级
                /* 清空级联选择的Id */
                this.selectedCates = []
                /* 隐藏对话框 */
                this.addDialogFormVisible = false
                /* 刷新页面 */
                this.initTable()
                /* 添加成功提示 */
                this.$message.success(res.meta.msg)
              } else {
                this.$message.error(res.meta.msg)
              }
            })
        } else {
          this.$message.error('校验不通过')
        }
      })
    },
    /* 关闭编辑分类会话框 */
    closeEdit () {
      // 移除表单校验结果
      this.$refs.editRef.clearValidate()
      // 重置选中分类id数组
      this.selectedCates = []
      // 重置input框
      this.editForm.cat_name = ''
      // 隐藏编辑框
      this.editDialogFormVisible = false
    },
    /* 取消编辑分类 */
    cancelEdit () {
      // 移除表单校验结果
      this.$refs.editRef.clearValidate()
      // 重置选中分类id数组
      this.selectedCates = []
      // 重置input框
      this.editForm.cat_name = ''
      // 隐藏编辑框
      this.editDialogFormVisible = false
    },
    /* 确认编辑分类 */
    confirmEdit () {
      console.log(this.editForm.id, this.editForm.cat_name)
      // js判断
      this.$refs.editRef.validate(IsPass => {
        if (IsPass) {
          // 根据id获取当前选中的分类数据
          editCate(this.editForm.id, { cat_name: this.editForm.cat_name }).then(res => {
            if (res.meta.status === 200) {
              // 隐藏会话框
              this.editDialogFormVisible = false
              // 刷新数据
              this.initTable()
              // 成功提示
              this.$message.success(res.meta.msg)
              console.log(res)
            } else {
              this.$message.error(res.meta.msg)
            }
          })
        } else {
          this.$message.error('分类名称不可为空')
        }
      })
    }
  }
}
</script>
